<script setup lang="ts">
import { useLayoutState } from '../../basic-layout/context'

const { logo, layout, isMobile } = useLayoutState()
const cls = computed(() => ({
  'ant-pro-global-header-logo': layout.value === 'mix' || isMobile.value,
  'ant-pro-top-nav-header-logo': layout.value === 'top' && !isMobile.value,
}))
</script>

<template>
  <div :class="cls"
   style="
   color: #fff;
   font-size: 24px; 
   ">
    <a c-primary 
    style="
    display: flex; 
    align-items: center;
    ">
      <img
        :src="logo"
        style="width: 40px; 
        position: relative;
        height: 40px;
        top:2px;
         display: block;"
      >
      <span
        style="color: #172e3e; 
        letter-spacing: 0.5px;
        font-size: 17px; 
        font-weight: 600;
        margin-left: 10px;
        position: relative;
        left:-8px
        "
      >
      中国贸促会培训中心综合业务系统
      </span>
    </a>
  </div>
</template>
